<template>
  <MainDialog
      title="请选择供应商"
      :showDialog="show"
      width="1100px"
      @close="handleClose">
      <template v-slot:content>
        <MainSearchForm ref="newsFormRef" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
        <div class="main_table mg-t-13">
          <MainTable
            ref="supplierTable"
            :loading="listLoading"
            :columns="columns"
            :tableData="tableData"
            @selection-change="handleSelectionChange"
            height="400px"
          >
            <template #selection>
              <el-table-column type="selection" :selectable="selectable" />
            </template>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <div>
                  <p class="is-selectd" @click="changeCheckbox(scope.row)" :class="scope.row.isSelected ? 'delete' : 'add'" v-if="selectable(scope.row)">{{ scope.row.isSelected ? '移出' : '添加' }}</p>
                  <p class="is-selectd" v-else>-</p>
                </div>
              </template>
            </el-table-column>
          </MainTable>
        </div>
        <div class="pagination-right">
          <MainPagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="changeSize"
            @current-change="changePage"
          />
        </div>
      </template>
      <template v-slot:footer>
        <div class="main-dialog-btn align-right">
          <el-button type="success" class="add-btn" @click="handleClose">取消</el-button>
          <el-button type="primary" class="submit" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </MainDialog>
</template>
<script>
import { $http } from "@/api/index";
export default {
  name: "AddSupplier",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    disabledList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loadNewsShow: true,
      formList: [
        { label: '供应商名称', placeholder: '供应商', value: 'name', type: 'input' },
      ],
      formValue: {
        name: '',
      },
      listLoading: false,
      columns: [
        { label: '供应商', prop: 'name', showTooltip: true },
        { label: '联系人', prop: 'contacts' },
        { label: '地址', prop: 'address' },
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  methods: {
    selectable(row) {
      return !this.disabledList.map(el => el.company_id).includes(row.company_id)
    },
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getData()
    },
    //  确定
    handleSubmit() {
      this.$emit('handleSubmit', this.tableData.filter(el => el.isSelected))
      this.handleClose()
    },
    handleClose() {
      this.formValue.company_name = ''
      this.currentPage = 1
      this.pageSize = 20
      this.$emit('close')
    },
    //  表格选择框选中事件
    handleSelectionChange(val) {
      const list = val.map(el => el.company_id)
      this.tableData.forEach(el => {
        el.isSelected = list.includes(el.company_id)
      })
    },
    //  操作  添加/移出
    changeCheckbox(row){
      this.$refs.supplierTable.getTableRef().toggleRowSelection(row, !row.isSelected)
    },
    changeSize() {},
    changePage() {},
    getData() {
      this.listLoading = true;
      let data = {
        page: this.currentPage,
        page_size: this.pageSize,
        ...this.formValue,
      };
      $http('/Supplier/supplier-list', data).then(
        (res) => {
          this.listLoading = false;
          this.tableData = res.data.list.map(el => {
            return {
              ...el,
              isSelected: false
            }
          });
          this.total = res.data.total;
        },
        (err) => {
          console.log(err);
        }
      );
    }
  }
}
</script>
<style lang="scss" scoped>
  .flex {
    @include flex(flex-end, center);
    margin-bottom: 14px;
  }
  .is-selectd {
    cursor: pointer;
    &.delete {
      color: #FF7785;
    }
    &.add {
      color: #42BEAA;
    }
  }
  .pagination-right {
    margin-bottom: 20px;
  }
</style>